<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false" @on-click="clickTabs">
				<ButtonGroup slot="extra">
					<template v-if="tabsName === 'industry'">
						<Button type="primary" size="small" @click="addIndustry">添加行业信息</Button>
					</template>
					<template v-if="tabsName === 'cooperation'">
						<Button type="primary" size="small" @click="addCooperation">添加合作厂家</Button>
					</template>
					<template v-if="tabsName === 'parts'">
						<Button type="primary" size="small" @click="addParts">添加配件厂家</Button>
					</template>
					<Button type="primary" size="small" icon="md-refresh" @click="refreshData"></Button>
				</ButtonGroup>

				<TabPane label="行业信息列表" name="industry">
					<table-view ref="tableView1" :tableCol='tableCol' :params='params' :requestUrl='requestUrl'></table-view>
				</TabPane>

				<TabPane label="合作厂家列表" name="cooperation">
					<table-view ref="tableView2" :tableCol='tableCol' :params='params' :requestUrl='requestUrl'></table-view>
				</TabPane>
				<TabPane label="配件厂家列表" name="parts">
					<table-view ref="tableView3" :tableCol='tableCol' :params='params' :requestUrl='requestUrl'></table-view>
				</TabPane>
			</Tabs>
		</Card>
		<infoSetOpe ref="infoSetOpe" :type='modalType' @table='operationDone'></infoSetOpe>
	</div>
</template>

<script>
	import infoSetOpe from './infoSetOpe'
	import tableView from '../../components/table'
	import {
		formatDate
	} from '../utils/time.js'

	export default {
		name: "info",
		components: {
			infoSetOpe,
			tableView
		},
		data() {
			return {
				//tab点击之后的名称
				tabsName: 'industry',
				requestUrl: '/home/information/my/list',
				tableCol: [{
						title: '序号',
						type: 'index',
						width: 80,
						align: 'center'
					},
					{
						title: '名称',
						key: 'urlName',
						minWidth: 120
					},
					{
						title: '链接地址',
						minWidth: 100,
						align: 'center',
						key: 'url',
					},
					{
						title: '创建时间',
						key: 'createTime',
						minWidth: 100,
						align: 'center',
						render: (h, params) => {
							return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
						}
					},
					{
						title: '操作',
						minWidth: 150,
						key: 'action',
						render: (h, params) => {

							return h('div', [
								h('Button',{
								    props:{
								        type:'error',
								        size:'small'
								    },
								    on:{
								        click:()=>{
								            this.delect(params.row.urlId)
								        }
								    }
								},'删除'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginLeft: '10px'
									},
									on: {
										click: () => {
											this.edit(params);
										}
									}
								}, '编辑')
							])

						}
					}
				],
				params: {
					pageNo: 1,
					pageSize: 10,
					type: '',
					userId: [0]
				},
				modalType: ''
			}
		},
		mounted() {
			// 查询类型列表
			this.type();
		},
		methods: {
			// 点击Tabs
			clickTabs(res) {
				this.tabsName = res;
				// 判断点击的标签
				switch (res) {
					case 'industry':
						this.params.type = 1
						this.$refs['tableView1'].getData()
						break;
					case 'cooperation':
						// 查询品牌列表
						this.params.type = 2
						this.$refs['tableView2'].getData()
						break;
					case 'parts':
						// 查询品牌列表
						this.params.type = 3
						this.$refs['tableView3'].getData()
						break;
				}
			},
			type() {
				this.params.type = 1
			},
			refreshData() {
				this.$refs['tableView1'].getData()
			},
			operationDone() {
				if(this.params.type==1){
					this.$refs['tableView1'].getData()
				}else if(this.params.type==2){
					this.$refs['tableView2'].getData()
				}else if(this.params.type==3){
					this.$refs['tableView3'].getData()
				}
				
			},
			//添加行业信息
			addIndustry() {
				this.modalType = 'addIndustry'
				this.$refs.infoSetOpe.show();
			},
			//添加合作厂商
			addCooperation() {
				this.modalType = 'addCooperation'
				this.$refs.infoSetOpe.show();
			},
			//添加配件厂商
			addParts() {
				this.modalType = 'addParts'
				this.$refs.infoSetOpe.show();
			},
			//修改
			edit(res) {
				switch (this.params.type) {
					case 1:
						this.modalType = 'editIndustry'
						this.$refs.infoSetOpe.show(res);
						break
					case 2:
						this.modalType = 'editCooperation'
						this.$refs.infoSetOpe.show(res);
						break
					case 3:
						this.modalType = 'editParts'
						this.$refs.infoSetOpe.show(res);
						break
				}
			},
			//删除类型
			delect(id) {
				this.$Modal.confirm({
					title: '删除？',
					content: '确定要删除该信息吗？删除不可恢复',
					onOk: () => {
						this.$http.post('/home/information/delete', {
							id: id
						}).then(res => {
							if (res.status == 200) {
								this.$Modal.remove();
								this.$Notice.warning({
									title: '删除成功'
								});
								if(this.params.type==1){
									this.$refs['tableView1'].getData()
								}else if(this.params.type==2){
									this.$refs['tableView2'].getData()
								}else if(this.params.type==3){
									this.$refs['tableView3'].getData()
								}
							}
						})
					}
				})
			},
			delCarBrand(res) {
				this.$Modal.confirm({
					title: '删除？',
					content: '确定要删除该品牌吗？删除不可恢复',
					onOk: () => {
						this.$http.post('/brand/delete', {
							id: res.row.brandId
						}).then(res => {
							if (res.status == 200) {
								this.$Modal.remove();
								this.$Notice.warning({
									title: '删除成功'
								});
								this.queryCarBrandList()
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
</style>
